<template>
    <el-slider v-model="currentValue"
    :min="props.min"
    :max="props.max"
    :step="props.step"
    :format-tooltip="formatTooltip"
   />
</template>

<script lang="ts" setup>
    const props = defineProps({
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 100
        },
        step: {
            type: Number,
            default: 0.1
        },
        precision: {
            type: Number,
            default: 2
        },
       modelValue: {
         type: Number,
         default: 0
       }
    });

    const currentValue = ref(props.modelValue);
    const emit = defineEmits(['update:modelValue'])

    watch(currentValue, (newVal) => {
      emit('update:modelValue', newVal)
    })

    const formatTooltip = (val: any) => {
        return val.toFixed(props.precision);
    };
</script>
<style scoped>

</style>
